import React, { useMemo, useState } from 'react'
// 引入css样式
import '../style/selected.css'
// 组件
import { Button, ConfigProvider, Segmented, Tooltip } from 'antd';
interface Props {

}

export const Footer = (props: Props) => {

    const text = <span style={{ color: '#686060', fontSize: '12px', display: 'inline-block', width: '130px' }}>邮箱:<br></br>
        bd@eqxiu.com
    </span>;
    const text1=<div style={{ color: '#686060',width:'160px',height:'210px',textAlign:'center'}}>
     <img src="	https://lib.eqh5.com/eqx.layout/images/wx_official_1.png" alt="" style={{width:'130px',height:'130px',marginTop:'10px'}}/>
       <span style={{fontSize:'12px',display:'inline-block',}}>扫描上方二维码</span>
       <span style={{fontSize:'12px',display:'inline-block',}}>关注"易企秀"微信公众号</span>
    </div>
    const text2=<div style={{ color: '#686060',width:'160px',height:'210px',textAlign:'center'}}>
     <img src="	https://lib.eqh5.com/eqx.layout/images/video_office.png" alt="" style={{width:'130px',height:'130px',marginTop:'10px'}}/>
       <span style={{fontSize:'12px',display:'inline-block',}}>扫描上方二维码</span>
       <span style={{fontSize:'12px',display:'inline-block',}}>关注"易企秀"微信公众号</span>
    </div>
    	
    const [arrow, setArrow] = useState('Show');
    const mergedArrow = useMemo(() => {
        if (arrow === 'Hide') {
            return false;
        }

        if (arrow === 'Show') {
            return true;
        }

        return {
            pointAtCenter: true,
        };
    }, [arrow]);
    return (
        <div className='foot_box'>
            <div className="foot_top">
                <div className="foot_topLeft">
                    <img src="https://lib.eqh5.com/eqx.layout/images/new_logo.svg" className='footImg' alt="" />
                    <span className='footspa'>全球1000强, 中国100强网站</span>
                    <div className="foot_smallbox">
                        <b className='footer_size'>700亿+</b>
                        <span className='footer_spa'>作品传播次数</span>
                    </div>
                    <div className="foot_smallbox">
                        <b className='footer_size'>3亿+</b>
                        <span className='footer_spa'>累计作品数</span>
                    </div>
                    <div className="foot_smallbox">
                        <b className='footer_size'>6500万+</b>
                        <span className='footer_spa'>累计注册用户</span>
                    </div>
                    <div className="foot_smallbox">
                        <b className='footer_size'>100万+</b>
                        <span className='footer_spa'>正版模版素材</span>
                    </div>
                    <div className="foot_smallbox">
                        <b className='footer_size'>3000+</b>
                        <span className='footer_spa'>安全运行天数</span>
                    </div>
                </div>
                <div className="foot_topCenter">
                    <div className="foot_topcenter_box">
                        <b className='footer_title'>产品矩阵</b>
                        <span className='foot_topCenter_size'>H5</span>
                        <span className='foot_topCenter_size'>海报</span>
                        <span className='foot_topCenter_size'>长页</span>
                        <span className='foot_topCenter_size'>表单</span>
                        <span className='foot_topCenter_size'>互动</span>
                        <span className='foot_topCenter_size'>视频</span>
                        <span className='foot_topCenter_size'>电子画册</span>
                    </div>
                    <div className="foot_topcenter_box">
                        <b className='footer_title'>创意工具</b>
                        <span className='foot_topCenter_size'>红包</span>
                        <span className='foot_topCenter_size'>打赏</span>
                        <span className='foot_topCenter_size'>短信通知</span>
                        <span className='foot_topCenter_size'>二维码美化</span>
                        <span className='foot_topCenter_size'>智能抠图</span>
                        <span className='foot_topCenter_size'>文字云</span>
                        <span className='foot_topCenter_size'>拼图</span>
                        <span className='foot_topCenter_size'>智能海报</span>
                        <span className='foot_topCenter_size'>一键快闪</span>
                    </div>
                    <div className="foot_topcenter_box">
                        <b className='footer_title'>灵感交流</b>
                        <span className='foot_topCenter_size'>用户社区</span>
                        <span className='foot_topCenter_size'>创意课堂</span>
                        <span className='foot_topCenter_size'>客户案例</span>
                        <span className='foot_topCenter_size'>精选推荐</span>
                        <span className='foot_topCenter_size'>客户案例</span>
                        <span className='foot_topCenter_size'>精选推荐</span>
                        <span className='foot_topCenter_size'>热门作品</span>
                        <span className='foot_topCenter_size'>营销日历</span>
                    </div>
                    <div className="foot_topcenter_box">
                        <b className='footer_title'>服务帮助</b>
                        <span className='foot_topCenter_size'>审核规则</span>
                        <span className='foot_topCenter_size'>作品审核</span>
                        <span className='foot_topCenter_size'>网站地图</span>
                        <span className='foot_topCenter_size'>热门模版</span>
                        <span className='foot_topCenter_size'>客服中心</span>
                        <span className='foot_topCenter_size'>帮助中心</span>
                        <span className='foot_topCenter_size'>隐私协议</span>
                    </div>
                    <div className="foot_topcenter_box">
                        <b className='footer_title'>合作伙伴</b>
                        <span className='foot_topCenter_size'>设计师招聘</span>
                        <span className='foot_topCenter_size'>合伙人招聘</span>
                        <span className='foot_topCenter_size'>正版素材商</span>
                        <span className='foot_topCenter_size'>内容中台</span>
                        <span className='foot_topCenter_size'>内容安全审核</span>
                        <span className='foot_topCenter_size'>定制设计服务</span>

                    </div>
                    <div className="foot_topcenter_box">
                        <b className='footer_title'>公司信息</b>
                        <span className='foot_topCenter_size'>关于我们</span>
                        <span className='foot_topCenter_size'>人才招聘</span>
                        <span className='foot_topCenter_size'>公司动态</span>
                        <span className='foot_topCenter_size'>荣誉奖项</span>
                        <Tooltip placement="leftTop" title={text} arrow={mergedArrow} color='white'>
                            <span className='foot_topCenter_size'>商务合作</span>
                        </Tooltip>
                    </div>
                    <div className="foot_topcenter_box">
                        <b className='footer_title'>社交媒体</b>
                            <Tooltip placement="leftTop" title={text1} arrow={mergedArrow} color='white'>
                          <span className='foot_topCenter_size'>微信公众号</span>
                        </Tooltip>
                        <span className='foot_topCenter_size'>官方微博</span>
                          <Tooltip placement="leftTop" title={text2} arrow={mergedArrow} color='white'>
                          <span className='foot_topCenter_size'>视频号</span>
                        </Tooltip>
                       
                    </div>

                </div>
                <div className="foot_topRigth">
                    {/* https://asset.eqh5.com/eqxiu/b3bfb4cb0d72d59b34251acb7808207d.png */}

                </div>
            </div>
            <div className="foot_center">
                <span className='foot_friendship'>友情链接</span>
                <span className='foot_Template'>热门模板</span>
            </div>
        </div>
    )
}
export default Footer